<template>
    <div class="login-wrap">
        <div class="ms-login">
            <div class="ms-title">论坛登录</div>
            <el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content">
                <el-form-item prop="mailbox">
                    <el-input v-model="param.mailbox" placeholder="邮箱号">
                        <el-button slot="prepend" icon="el-icon-lx-people"></el-button>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" placeholder="密码" v-model="param.password">
                        <el-button slot="prepend" icon="el-icon-lx-lock"></el-button>
                    </el-input>
                </el-form-item>
                <div class="login-btn">
                    <el-button type="primary" @click="submitForm()">登录</el-button>
                </div>
                <p class="login-tips"><a href="http://localhost:8081/forgetpwd">忘记密码</a> <a href="http://localhost:8081/register">注册</a></p>
                
            </el-form>
        </div>
    </div>
</template>

<script>
import { loginMail,getMail } from '../../api/login';
export default {
    data: function() {
        // 密码的校验方法
      let validatePass = (rule, value, callback) => {
        if (value === "") {
          return callback(new Error("请输入密码"));
        }
        // 密码以字母开头,长度在6-18之间,允许字母数字和下划线
        const passwordRule = /^[a-zA-Z]\w{5,17}$/;
        if (passwordRule.test(value)) {
          this.$refs.login.validateField("checkPass");
          return callback();
        } else {
          return callback(
            new Error("字母开头,长度6-18之间,允许字母数字和下划线")
          );
        }
      };
      //检测邮箱是否注册
      let validateemail = (rule, value, callback) => {
        if (value === "") {
          return callback(new Error("请输入邮箱"));
        }
        const emailRule = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
        if (emailRule.test(value)) {
          this.$refs.login.validateField("checkPass");
            return callback();
        } else {
          return callback(new Error("格式xxxx@xx.xxx"));
        }
      };
        return {
            param: {
                mailbox: '',
                password: ''
            },
            rules: {
                password: [{ validator: validatePass, trigger: "blur" }],
                mailbox:[{ validator: validateemail, trigger: "blur" }],
            }
        };
    },
//     methods: {
//  
//         userlogin(ddd) {
//             var that = this;
//             console.log('userlogin');
//             login(ddd)
//                 .then(res => {
//                     console.log(res);
//                     if (res.code == -1) {
//                         that.$message.success('登录成功');
//                         localStorage.setItem("authToken",res.data.authToken)
//                         localStorage.setItem('ms_username', this.param.username);
//                         localStorage.setItem('loginrname', res.data.loginrname);
//                         localStorage.setItem('tname', res.data.tname);
//                         console.log(res.data.tname + "    res.data.tname")
//                         if(res.code == -1){
//                         that.$router.push('/allfood');
//                         }
//                         else{
//                         that.$router.push('/');
//                         }

//                     } else if (res.code == 1) {
//                         that.$message.error('账号错误');
//                         console.log('error submit!!');
//                         return false;
//                     } else if (res.code == 2) {
//                         this.$message.error('密码错误');
//                         console.log('error submit!!');
//                         return false;
//                     }
//                 })

//                 .catch(res => {});
//         }
//     }
        methods: {
            submitForm(){
                 var ddd = JSON.stringify(this.param);
                 
                loginMail(ddd)
                .then((res)=>{
                  if(res.code== "200"){
                    this.$message.success(res.mess)
                    this.getData();
                    localStorage.setItem('mailbox', this.param.mailbox);
                    this.$router.push("/")
                  }else{
                      this.$message.error(res.mess);
                  }
                })
            },
             getData(){
              getMail(
                {mailbox:this.param.mailbox}
              )
              .then((res)=>{
                   console.log(res)
                   localStorage.setItem('uid',res.data.uid);
                   localStorage.setItem('name',res.data.name);
                   localStorage.setItem('image',res.data.image);
              })
          }
        },
};
</script>

<style scoped>
.login-wrap {
    position: relative;
    width: 100%;
    height: 100vh;
    /* background-color: black; */
    background-image: url(../../assets/img/7.jpg);
    background-size: 100%;
}
.ms-title {
    width: 100%;
    line-height: 50px;
    text-align: center;
    font-size: 20px;
    color: #fff;
    border-bottom: 1px solid #ddd;
}
.ms-login {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 350px;
    margin: -190px 0 0 -175px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.3);
    overflow: hidden;
}
.ms-content {
    padding: 30px 30px;
}
.login-btn {
    text-align: center;
}
.login-btn button {
    width: 100%;
    height: 36px;
    margin-bottom: 10px;
}
.login-tips {
    font-size: 12px;
    line-height: 30px;
    color: #fff;
}
</style>
